<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('排班管理')"></head>
</head>
<body class="larryms-auth">
<div class="layui-row larryms-panel">
    <div class="larryms-panel-heading layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
        <span class="panel-tit">排班列表</span>
    </div>
    <div class="larryms-panel-body layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
        <div class="larryms-tools">
            <!--<form id="queryForm">
                <div class="larryms-search-box">
                    <div class="layui-inline">
                        <a class="layui-btn larryms-search" id="searchBtn" data-type="query"
                           data-form="queryForm"><i class="layui-icon layui-icon-search"></i>搜索</a>
                        <a class="layui-btn larryms-search" id="reloadBtn" data-type="reload"
                           data-form="queryForm"><i class="layui-icon layui-icon-refresh"></i></a>
                    </div>
                </div>
            </form>-->
            <div class="larryms-btn-group" style="margin-top:10px">
                <!--<button class="layui-btn layui-btn-sm layui-btn-normal"  data-type="add"
                        data-title="新增排班"  th:attr="data-url=@{/admin/taskTemplate/showAdd}">
                    <i class="layui-icon">&#xe61f;</i><cite>增加</cite></button>
                <button class="layui-btn layui-btn-sm" data-type="update"  data-title="修改排班"
                        th:attr="data-url=@{/admin/taskTemplate/showUpdate}">
                    <i class="layui-icon">&#xe642;</i><cite>编辑</cite></button>
                <button class="layui-btn layui-btn-sm layui-btn-primary" data-type="detail"
                        data-title="查看排班详情" th:attr="data-url=@{/admin/taskTemplate/showUpdate}">
                    <i class="larry-icon larry-file-markdown"></i><cite>查看</cite></button>-->

                <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="importData"
                        id="importDataBtn" data-title="导入">
                    <i class="larry-icon larry-fold7"></i><cite> 导入</cite></button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" data-type="exportData"
                        id="exportDataBtn" data-title="导出">
                    <i class="larry-icon larry-unfold"></i><cite> 导出</cite></button>
                <button class="layui-btn layui-btn-sm layui-btn-primary" data-type="exportTemplate"
                        id="exportTemplateBtn" data-title="生成模板">
                    <i class="larry-icon larry-file-markdown"></i><cite> 生成模板</cite></button>
            </div>
        </div>
        <div class="user-list layui-col-lg12 layui-col-md12 layui-col-sm12 layui-col-xs12">
            <table id="taskTemplateList" lay-filter="taskTemplateList" class="larryms-table-id"
                   th:attr="data-url=@{/admin/taskTemplate/getData}"></table>
        </div>

        <!-- 隐藏的需要提交的表单 -->
        <form style="display: none" id="exportTemplateForm" th:action="@{/admin/taskTemplate/exportTemplate}"
              method="get">
            <!-- FIXME 用于还没有deptId，暂时使用userId -->
            <input name="deptId" th:value="${session.adminUser?.userId}"/>
            <input name="month" value="2019-06"/>
        </form>
        <form style="display: none" id="exportDataForm" th:action="@{/admin/taskTemplate/export}"
              method="get">
            <input name="deptId" th:value="${session.adminUser?.userId}"/>
            <input name="startDate" value="2019-06-01"/>
            <input name="endDate" value="2019-06-09"/>
        </form>
        <form style="display: none" id="importForm" enctype="multipart/form-data"
              th:action="@{/admin/taskTemplate/import}" method="post">
            <input type="file" name="file" id="fileBtn"
                   accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"/>
        </form>
    </div>
</div>

<script type="text/javascript" th:src="@{/static/larryms/layui/layui.js}"/>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/

var table, bathPath = /*[[@{/}]]*/ "/";
layui.config({
    version: ui.version,
    base: bathPath + 'static/larryms/',  //实际使用时，建议改成绝对路径
    rightMenu: "none" // false关闭，设置为custom时使用自定义，不使用默认menu
}).extend({
    larry: 'js/base'
}).use(['larry', 'jquery', 'table', 'form', 'custom'], function () {
    var $ = layui.$, larryms = layui.larryms, form = layui.form, beone = layui.custom;
    table = layui.table;
    //按钮组监听
    $('.larryms-btn-group .layui-btn').on('click', function () {
        var type = $(this).data('type'),
            url = $(this).data('url'),
            tit = $(this).data('title');
        active[type] ? active[type].call(this, url, tit) : '';
    });

    $("#searchBtn,#reloadBtn").on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

    // 选择文件自动上传
    $("#fileBtn").on('change', function () {
        var filename = $(this).val();
        var index = filename.lastIndexOf(".");
        var suffix = filename.substr(index + 1);
        if (suffix == 'xlsx') {
            $(this).val('');
            layer.msg('开始导入文件...', {
                time: 1500
            });
            $("#importForm").submit();

            /*var formData = new FormData();
            formData.append("file",$("#fileBtn")[0].files[0]);
            formData.append("name",filename);
            $.ajax({
                url: $("#importForm").attr("action"),
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    if (data && data.code == 0) {
                        layer.msg('导入成功', {
                            time: 1500
                        });
                    }

                },
                error: function (data) {
                    layer.msg('导入失败', {
                        time: 1500
                    });
                }
            });*/
        } else {
            larryms.message('请选择正确格式的模板文件', 'error', 1500);
        }
    });

    var pageTableID = $('.larryms-table-id').attr('id');
    var dataUrl = $('#' + pageTableID).data('url')
    //方法级渲染
    table.render({
        id: pageTableID, elem: '#' + pageTableID, url: dataUrl, method: 'POST'
        , cols: [[{field: 'order', title: '序号', minWidth: 40}
            , {field: 'job', title: '班别', minWidth: 100}
            , {field: 'area', title: '分区', minWidth: 100}
            , {field: 'sunday', title: '星期天', minWidth: 100}
            , {field: 'monday', title: '星期一', minWidth: 100}
            , {field: 'tuesday', title: '星期二', minWidth: 100}
            , {field: 'wednesday', title: '星期三', minWidth: 100}
            , {field: 'thursday', title: '星期四', minWidth: 100}
            , {field: 'friday', title: '星期五', minWidth: 100}
            , {field: 'saturday', title: '星期六', minWidth: 100}
        ]], height: 'full-200', where: {
            deptId: 1,
            startDate: '2019-06-02',
            endDate: '2019-06-08'
        }
    });

    var active = {
        query: function () {
            var formId = $(this).data("form");
            table.reload(pageTableID, {
                where: {
                    deptId: 1,
                    startDate: '2019-06-02',
                    endDate: '2019-06-08'
                }
            });
        },
        reload: function () {
            var formId = $(this).data("form");
            table.reload(pageTableID, {
                where: beone.clearForm(formId)
            });
        },
        add: function (url, title) {
            var that = this;
            if ($(that).attr('data-flag') == 'exist') {
                var index = layui.cache.layerIndex,
                    $max = $('#layui-layer' + index).find('.layui-layer-maxmin');
                $max.click();
                layui.cache.layerIndex = null;
            } else {
                $(that).attr('data-flag', 'exist');
                var index = beone.dialog({
                    title: title, url: url, width: 700, height: 500,
                    success: function (index, layero) {
                        form.render();
                    }, end: function () {
                        $(that).removeAttr("data-flag");
                        layui.cache.layerIndex = null;
                    }
                });
            }
        },
        update: function (url, title) {
            var checkStatus = table.checkStatus(pageTableID)
                , data = checkStatus.data;
            if (data.length != 1) {
                layer.msg('请选择一行编辑', {icon: 5});
                return false;
            }
            showUpdate(data[0].id, url, title, true);
        },
        detail: function (url, title) {
            var checkStatus = table.checkStatus(pageTableID)
                , data = checkStatus.data;
            if (data.length != 1) {
                layer.msg('请选择一行查看', {icon: 5});
                return false;
            }
            showUpdate(data[0].id, url, title, false);
        },
        importData: function () {
            // 点击文件选中
            document.getElementById("fileBtn").click();
        },
        exportData: function () {
            $("#exportDataBtn").addClass("layui-btn-disabled");
            setTimeout(function () {
                $("#exportDataBtn").removeClass("layui-btn-disabled");
            }, 2000);

            $("#exportDataForm").submit();
            layer.msg('开始导出数据，请稍候...', {
                time: 1500
            });
        },
        exportTemplate: function () {
            $("#exportTemplateBtn").addClass("layui-btn-disabled");
            setTimeout(function () {
                $("#exportTemplateBtn").removeClass("layui-btn-disabled");
            }, 2000);

            $("#exportTemplateForm").submit();
            layer.msg('开始下载模板，请稍候...', {
                time: 1500
            });
        }
    };

    //监听工具条
    table.on('tool(' + pageTableID + ')', function (obj) {
        var data = obj.data;
        var url = $(this).data('url');
        var title = $(this).data('title');
        if (obj.event === 'detail') {
            showUpdate(data.id, url, title, false);
        } else if (obj.event === 'del') {
            var index = beone.confirm('确定删除排班[<label style="color: #00AA91;">该记录</label>]?', function () {
                url = url + "/" + data.id;
                beone.doRequest(url, {}, function () {
                    layer.close(index);
                    table.reload(pageTableID);
                });
            })
        } else if (obj.event === 'edit') {
            showUpdate(data.id, url, title, true);
        }
    });

    function showUpdate(id, url, title, flag) {
        url += "/" + id + (flag ? "" : "?detail=true");
        beone.dialog({title: title, url: url, width: 700, height: 500});
    }
});
/*]]>*/</script>
</body>
</html>